<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <div style="margin: 10px 0">
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-button type="success" plain @click="addRole"> 新增角色</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" height="505px"  v-loading="loading">
      <el-table-column fixed prop="id" label="ID" width="50"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column prop="status" label="状态" width="50"> </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope)"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope)"
            type="danger"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form">
        <el-form-item label="名称：" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述：" :label-width="formLabelWidth">
          <el-input
            v-model="form.description"
            autocomplete="off"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth">
          <el-switch

            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="激活"
            inactive-text="禁用"
            active-value="Y"
            inactive-value="N"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <Pagenation
      :currentPage="pageInfo.pageNum"
      :pageSize="pageInfo.pageSize"
      :total="pageInfo.total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    />
  </div>
</template>

<script>
import Pagenation from '@/components/pagenation/index.vue';
export default {
  components: { Pagenation },
  data() {
    return {
      title: '',
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '60px',
      form: {
        id: 0,
        name: '',
        description: '',
        status: true,
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      },
    };
  },
  created() {
    this.initTableData();
  },
  methods: {
    addRole() {
      (this.dialogFormVisible = true),
        (this.form.id = 0),
        (this.form.name = ''),
        (this.form.description = ''),
        (this.form.status = true);
      this.title = '新增角色';
    },
    submit() {
      if (this.title === '新增角色') {
        this.$axios
          .post('rbacRole/', this.form)
          .then((res) => {
            if (res.data.code === 500) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.success(res.data.msg);
              this.initTableData();
              this.dialogFormVisible = false;
            }
          })
          .catch();
      } else if (this.title === '修改角色') {
        this.$axios
          .put('rbacRole/', this.form)
          .then((res) => {
            if (res.data.code === 500) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.success(res.data.msg);
              this.initTableData();
              this.dialogFormVisible = false;
            }
          })
          .catch();
      }
    },
    deleteRow(scope) {
      this.$axios
        .delete('rbacRole/' + scope.row.id)
        .then((res) => {
          if (res.data.code === 200) {
            this.$notify({
              title: '成功',
              message: res.data.msg,
              type: 'success',
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: res.data.msg,
            });
          }
          this.initTableData();
        })
        .catch();
    },
    editRow(scope) {
      this.title = '修改角色';
      let r = scope.row;
      this.form.id = r.id;
      this.form.name = r.name;
      this.form.description = r.description;
      this.form.status = r.status;
      this.dialogFormVisible = true;
    },
    initTableData() {
      this.$axios
        .get('rbacRole/' + this.pageInfo.pageNum + '/' + this.pageInfo.pageSize)
        .then((res) => {
          this.tableData = res.data.data.list;

          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        })
        .catch();
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.initTableData();
    },
    currentChange(val) {
      this.pageInfo.pageNum = val;
      this.initTableData();
    },
  },
};
</script>
